<template>
  <view class="attendance-list-container">
    <view class="search-header">
      <uni-datetime-picker 
        type="date" 
        v-model="queryParams.beginTime" 
        :clear-icon="false"
        placeholder="开始日期"
      />
      <text class="date-separator">至</text>
      <uni-datetime-picker 
        type="date" 
        v-model="queryParams.endTime" 
        :clear-icon="false"
        placeholder="结束日期"
      />
      <button type="primary" size="mini" @click="handleQuery">查询</button>
      <button type="default" size="mini" @click="resetQuery">重置</button>
    </view>
    
    <view class="attendance-stats">
      <view class="stats-item">
        <text class="stats-num">{{ stats.normalDays || 0 }}</text>
        <text class="stats-label">正常</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">{{ stats.incompleteDays || 0 }}</text>
        <text class="stats-label">未签退</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">{{ stats.absentDays || 0 }}</text>
        <text class="stats-label">缺勤</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">{{ stats.totalDays || 0 }}</text>
        <text class="stats-label">总计</text>
      </view>
    </view>
    
    <view class="list-content">
      <view class="list-item" v-for="(item, index) in attendanceList" :key="index" @click="goToDetail(item)">
        <view class="item-date">
          <text class="date">{{ formatDate(item.attendanceDate) }}</text>
          <text class="week">{{ getWeekDay(item.attendanceDate) }}</text>
        </view>
        <view class="item-time">
          <view class="time-row">
            <text class="time-label">签到：</text>
            <text class="time-value">{{ item.clockInTime || '未签到' }}</text>
          </view>
          <view class="time-row">
            <text class="time-label">签退：</text>
            <text class="time-value">{{ item.clockOutTime || '未签退' }}</text>
          </view>
        </view>
        <view class="item-status" :class="getStatusClass(item)">
          {{ getStatusText(item) }}
        </view>
      </view>
      
      <uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMore"></uni-load-more>
    </view>
  </view>
</template>

<script>
import { listAttendance, getAttendanceStats } from "@/api/system/attendance";

export default {
  name: "AttendanceList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 打卡记录列表
      attendanceList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: this.getLastMonthDate(),
        endTime: this.getCurrentDate()
      },
      // 加载更多状态
      loadMoreStatus: 'more',
      // 统计数据
      stats: {
        normalDays: 0,
        incompleteDays: 0,
        absentDays: 0,
        totalDays: 0
      }
    };
  },
  created() {
    this.getList();
    this.getStats();
  },
  methods: {
    /** 查询打卡记录列表 */
    getList() {
      this.loading = true;
      this.loadMoreStatus = 'loading';
      
      listAttendance(this.queryParams).then(response => {
        this.attendanceList = this.queryParams.pageNum > 1 ? 
          this.attendanceList.concat(response.rows) : response.rows;
        this.total = response.total;
        this.loading = false;
        this.loadMoreStatus = this.attendanceList.length >= this.total ? 'noMore' : 'more';
      });
    },
    // 获取统计数据
    getStats() {
      const params = {
        beginTime: this.queryParams.beginTime,
        endTime: this.queryParams.endTime
      };
      
      getAttendanceStats(params).then(res => {
        if (res.code === 200) {
          this.stats = res.data || {
            normalDays: 0,
            incompleteDays: 0,
            absentDays: 0,
            totalDays: 0
          };
        }
      });
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      this.getStats();
    },
    // 重置按钮操作
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        beginTime: this.getLastMonthDate(),
        endTime: this.getCurrentDate()
      };
      this.getList();
      this.getStats();
    },
    // 加载更多
    loadMore() {
      if (this.loadMoreStatus === 'noMore') return;
      this.queryParams.pageNum += 1;
      this.getList();
    },
    // 获取当前日期
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取一个月前的日期
    getLastMonthDate() {
      const now = new Date();
      now.setMonth(now.getMonth() - 1);
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取星期几
    getWeekDay(dateStr) {
      if (!dateStr) return '';
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return weekdays[new Date(dateStr).getDay()];
    },
    // 获取状态样式类
    getStatusClass(item) {
      if (!item.clockInTime) return 'status-absent';
      if (!item.clockOutTime) return 'status-incomplete';
      return 'status-normal';
    },
    // 获取状态文本
    getStatusText(item) {
      if (!item.clockInTime) return '缺勤';
      if (!item.clockOutTime) return '未签退';
      return '正常';
    },
    // 跳转到详情页
    goToDetail(item) {
      this.$tab.navigateTo(`/pages/system/attendance/detail?id=${item.attendanceId}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.attendance-list-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-header {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
  .date-separator {
    margin: 0 5px;
  }
  
  button {
    margin-left: 10px;
    margin-top: 10px;
  }
}

.attendance-stats {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  
  .stats-item {
    text-align: center;
    
    .stats-num {
      font-size: 20px;
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }
    
    .stats-label {
      font-size: 14px;
      color: #666;
    }
  }
}

.list-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  
  .list-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-date {
      width: 100px;
      
      .date {
        font-size: 16px;
        font-weight: bold;
        display: block;
      }
      
      .week {
        font-size: 12px;
        color: #666;
      }
    }
    
    .item-time {
      flex: 1;
      
      .time-row {
        display: flex;
        margin-bottom: 5px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .time-label {
          width: 50px;
          color: #666;
        }
        
        .time-value {
          font-weight: bold;
        }
      }
    }
    
    .item-status {
      width: 60px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 12.5px;
      font-size: 12px;
      
      &.status-normal {
        background-color: #e1f3d8;
        color: #67c23a;
      }
      
      &.status-incomplete {
        background-color: #fdf6ec;
        color: #e6a23c;
      }
      
      &.status-absent {
        background-color: #fde2e2;
        color: #f56c6c;
      }
    }
  }
}
</style> 